<template>
  <div class="six_palace_box">
    <div class="six_palace">
      <div class="six_palace_title">
        <img src="../../../assets/img/home/ic_playgame.png" alt="">
        <span class="title">动漫</span>
        <div class="more-right" @click="discountMore">
          <span>更多</span>
          <img src="../../../assets/img/home/ic_right.png" alt="">
        </div>
      </div>
      <div class="container">
      <swiper class="swiper-box" ref="mySwiper">
        <swiper-slide
          class="area-list"
          v-for="(son, index) in resultArrList"
          :key="index"
          :slides-per-view="3"
        >
          <div v-for="(item, id) in son" :key="id" class="list-box" @click="itemClick(index,id)">
            <div class="gameicon">
              <img :src="item.gameicon" alt="">
            </div>
            <div class="gamename">{{item.gamename}}</div>
            <div class="coupon" v-if="item.has_coupon == 1">赠代金券</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    
    <div class="change" @click="changeClick">
      <div class="icon">
        <img src="../../../assets/img/home/i-change.png" alt="">
        <div class="hidden">无</div>
      </div>
      <div class="text">换一换</div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  props: {
    gridList: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      pageCount: 6,
      currentPage: 0,
      currentList: [],
      newList: [],
    };
  },
  methods: {
    discountMore() {},
    itemClick(index, id) {},
    changeClick() {
      if (1 + this.currentPage < this.pageNum) {
        return this.currentPage++;
      }
      this.currentPage = 0;
    },
  },
  computed: {
    list() {
      return this.gridList.list
    },
    pageNum() {
      return this.gridList.page_num || "";
    },
    listLenght() {
      if (this.list != null) {
        return this.list.length;
      }
    },
    resultArrList() {
      const newArr = this.list;
      const resultArr = [];
      const a = this.listLenght % this.pageCount;
      for (var i = 0; i < a; i++) {
        newArr.push(this.list[i]);
      }
      resultArr.push(
        this.list.slice(
          this.currentPage * this.pageCount,
          (this.currentPage + 1) * this.pageCount
        )
      );
      return resultArr;
    },
  },
};
</script>

<style lang="less" scoped>
.six_palace_box {
  margin-top: 0.266667rem;
  padding: 0 0.266667rem;
  border-radius: 0.266667rem;
  .six_palace {
    box-sizing: border-box;
    height: 8.666667rem;
    width: 9.466667rem;
    padding: 0.4rem 0;
    border-radius: 0.266667rem;
    background: #ffffff;
    .six_palace_title {
      display: flex;
      padding:  0 .266667rem;
      align-items: center;
      font-size: 0.48rem;
      font-weight: 800;
      color: #000;
      img {
        flex-shrink: 1;
        margin-right: 0.133333rem;
        display: inline-block;
        width: 0.586667rem;
        height: 0.586667rem;
      }
      .title {
        flex-grow: 1;
      }
      .more-right {
        flex-shrink: 1;
        font-size: 0.373333rem;
        color: #666666;
        font-weight: 400;
        img {
          display: inline-block;
          width: 0.266667rem;
          height: 0.266667rem;
          margin: 0;
        }
      }
    }
  }
}

.container {
  margin-top: .266667rem;
  height: 5.866667rem;
}

.swiper-box {
  height: 100%;
}

.area-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.list-box {
  position: relative;
  padding: .106667rem .266667rem 0;
  height: 2.666667rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gameicon {
  width: 2.133333rem;
  height: 2.133333rem;
  border-radius: .533333rem;
  overflow: hidden;
}

.gameicon img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.gamename {
  font-size: .346667rem;
  font-weight: 700;
  color: #333333;
  padding-top: .2rem;
  width: 2.533333rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.change {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .266667rem;
  font-size: .32rem;
  color: #ff5656;
  padding: .266667rem 0;
}

.icon {
  display: flex;
  align-items: center;
  width: .586667rem;
  height: .586667rem;
  img {
    width: 100%;
    height: 100%;
  }
}

.hidden {
  width: 0;
  overflow: hidden;
}

.text {
  margin-left: .133333rem;
}

.coupon {
  position: absolute;
  top: -0.053333rem;
  right: .066667rem;
  box-sizing: border-box;
  width: 1.306667rem;
  height: .453333rem;
  background: #ff0c0c;
  border: .04rem solid #ffffff;
  border-radius: .226667rem .226667rem .226667rem 0;
  font-size: .266667rem;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  line-height: .373333rem;
}
</style>